<template>
    <el-table :data="filterTableData" border class="tabledata" :cell-style="cellStyle">
        <el-table-column prop="id" type="index" label="序号" width="90px" align="center" />
        <el-table-column prop="title" sortable label="反馈标题" />
        <el-table-column prop="categories" sortable label="反馈类别" />
        <el-table-column prop="senderEmail" sortable label="发送者" />
        <el-table-column prop="sendTime" sortable label="发送时间" />

        <el-table-column fixed="right" align="right" width="200px">
            <template #header>
                <el-input v-model="search" size="small" placeholder="搜索" />
            </template>
            <template v-slot="scope">
                <el-button type="primary" size="small"
                    @click="viewFeedback($event, scope.row.id, scope.$index)">查看</el-button>
                <el-button type="success" size="small"
                    @click="openReplyFeedback($event, scope.row.id, scope.$index)">回复</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 查看反馈信息弹出框 -->
    <div class="view_feedback_info">
        <el-dialog v-model="dialogFormVisible" title="反馈信息">
            <el-row class="row-bg" justify="space-between">
                <el-col :span="5" align="left">
                    <div class="form_label" align="left">反馈编号:</div>{{ data.feedbackItem.id }}
                </el-col>
                <el-col :span="7">
                    <div class="form_label" align="left">反馈标题:</div>{{ data.feedbackItem.title }}
                </el-col>
                <el-col :span="5" align="right">
                    <div class="form_label" align="left">反馈类别:</div>{{ data.feedbackItem.categories }}
                </el-col>
            </el-row>
            <el-row class="row-bg" justify="space-between">
                <el-col :span="9" align="left">
                    <div class="form_label" align="left">反馈者邮箱:</div>{{ data.feedbackItem.senderEmail }}
                </el-col>
                <el-col :span="9" align="right">
                    <div class="form_label" align="left">反馈时间:</div>{{ data.feedbackItem.sendTime }}
                </el-col>
            </el-row>
            <el-form>
                <p align="left" style="line-height: 40px;margin-top: 20px;">反馈内容:</p>
                <el-input :autosize="{ minRows: 6, maxRows: 10 }" type="textarea" v-model="data.feedbackItem.content"
                    :readonly=true />
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">关闭</el-button>
                    <el-button type="primary" @click="toReply">
                        回复
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <!-- 回复反馈信息对话框 -->
    <div>
        <el-dialog v-model="dialogReplyVisible" title="回复反馈信息">
            <el-container>
                <el-aside width="20%" style="height: 50vh;overflow: hidden;">
                    <div class="container_left" style="height: 100px;line-height: 100px;">
                        收件人：
                    </div>
                    <div class="container_left">
                        回复内容：
                    </div>
                </el-aside>
                <el-main style="">
                    <div class="container_right" style="height: 100px;line-height: 100px;text-align: left;">
                        {{ data.replyFeedbackInfo.recipient }}
                    </div>
                    <div class="container_right">
                        <el-input :autosize="{ minRows: 10, maxRows: 16 }" type="textarea"
                            v-model="data.replyFeedbackInfo.content" />
                    </div>
                </el-main>
            </el-container>
            <template #footer>
                <el-row>
                    <el-col :span="24" align="right">
                        <el-button @click="dialogReplyVisible = false">关闭</el-button>
                        <el-button type="primary" @click="reply">
                            回复
                        </el-button>
                    </el-col>
                </el-row>

            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { reactive, ref, computed } from "vue";
import { getFeedback, replyFeedback } from "../../utils/request";
import { ElMessage } from 'element-plus'

// 弹出框可见
const dialogFormVisible = ref(false)
const dialogReplyVisible = ref(false)
// 页面数据
const data = reactive({
    isReplied: false,
    pageSize: 10,
    pageNumber: 1,
    feedbackInfo: [],
    feedbackItem: {},
    replyFeedbackInfo: {
        recipient: '',
        content: ''
    }
})

// 表格字段为空操作
const cellStyle= ({ row, column, rowIndex, columnIndex })=> {
  if (row[column.property] == null) {
    row[column.property] = '--'
  }
}
// 表格搜索，使用计算属性
const search = ref('')
const filterTableData = computed(() =>
    data.feedbackInfo.filter(
        (data) =>
            !search.value ||
             data.title.includes(search.value)  ||
             data.categories.includes(search.value)  ||
             data.senderEmail.includes(search.value)  ||
             data.sendTime.includes(search.value) 
    )
)

getFeedback(data).then(res => {
    if (res.data.code != 200) {
        ElMessage.error(res.data.message || '请求失败')
    } else {
        data.feedbackInfo = res.data.data
    }

})

function viewFeedback(event, id, index) {
    dialogFormVisible.value = true
    data.replyFeedbackInfo.recipient = data.feedbackInfo[index].senderEmail
    data.feedbackItem = data.feedbackInfo[index]
}
function openReplyFeedback(event, id, index) {
    dialogReplyVisible.value = true
    data.replyFeedbackInfo.recipient = data.feedbackInfo[index].senderEmail
}

function toReply() {
    dialogFormVisible.value = false
    dialogReplyVisible.value = true
}

function reply() {
    replyFeedback(data.replyFeedbackInfo).then(res => {
        if (res.data.code == 200) {
            ElMessage.success(res.data.message || '发送成功');
            data.replyFeedbackInfo.content = '';
            dialogReplyVisible.value = false;
        } else {
            ElMessage.error(res.data.message || '发送失败')
        }
    })
}
</script>
<style >
.el-dialog__title {
    font-size: 30px;
}

.el-dialog__header {
    line-height: 50px;
    height: 50px;
}

.el-dialog__body {
    padding: 0 40px;
}

.el-dialog__footer {
    width: 100%;
    height: 80px;
    display: inline-block;
    text-align: right;
    padding-right: 40px;
}

.tabledata {
    width: 100%;
}

.form_label {
    width: 80px;
    display: inline-block;
}

.el-col-6 {
    line-height: 60px;
    height: 60px;
}

.el-row {
    height: 60px;
    line-height: 60px;
}

.el-table__row,
.el-table__cell {
    height: 60px;
}

.reply_body {
    all: initial;
}

.container_left {
    width: 200px;
    text-align: left;
    padding: 20px;
    font-size: 20px;
}

.container_right {
    width: 100%;
    font-size: 20px;
}
</style>
      